<template>
	<div class="container">
		<div class="content">
			<div class="panel">
				<div class="logo" @click="openHomePage()"></div>
				<div class="title">注册</div>
				
				<div class="row row_1">
					<div class="icon"></div>
					<span class="prefix">86+</span>
					<input class="input phoneNumber" v-model="param.phoneNumber" type="text" 
						   autocomplete="off" spellcheck="false" placeholder="输入手机号码" maxLength="20"/>
				</div>
				<div class="row row_2">
					<div class="icon"></div>
					<input class="input captcha" v-model="param.captcha" type="text"
						   autocomplete="off" spellcheck="false" placeholder="输入短信验证码" maxLength="20"/>
					<div class="code" :class="codeTime>0?'code_wait':''" @click="getCode()">{{codeMsg}}</div>
				</div>
				<div class="row row_3">
					<div class="icon"></div>
					<input class="input password" v-model="param.password" type="password"
						   autocomplete="new-password" placeholder="输入新密码（6-14位字母数字组成）" maxLength="20"/>
				</div>
				<div class="row row_3">
					<div class="icon"></div>
					<input class="input confirmPassword" v-model="param.confirmPassword" type="password"
						   autocomplete="new-password" placeholder="确认新密码" maxLength="20"/>
				</div>
				<div class="btn_div">
					<div class="remember" style="width:3.2rem;" :class="remember? 'remember_active':''" @click="remember=!remember">
						已阅读并同意<span @click="userAgreement()">《小鳄鱼课堂用户协议》</span>
					</div>
				</div>
				<div class="sure_btn" :class="remember? '':'no_sure_btn'" @click="register()">注 册</div>
				<div class="tip">
					已有账号&emsp;
					我要<span class="tip_btn" @click="openLogin()">登录</span>
				</div>
				
			</div>
			<div class="remark">
				<!--Powered By EduSoho v8.3.26 2014-2019<br/>
				课程内容版权均归 威创集团股份有限公司 所有 ICP备13006852号-1-->
			</div>
		</div>
	</div>
</template>

<script>
var vm;
export default {
	data : function() {
		return {
			codeMsg : "获取验证码",
			codeTime : 0,
			remember:false,
			param : {
				phoneNumber : "",
				password : "",
				confirmPassword : "",
				captcha : ""
			}
		}
	},
	methods : {
		userAgreement:function(){
			window.event.stopPropagation();
			window.open("http://eyu.vtronedu.com/static/page/user_agreement.html", "_blank");
		},
		openHomePage : function() {
			router.push("/");
		},
		openLogin : function() {
			router.push("/account/login");
		},
		getCode : function() {
			//等待验证码过程,不允许再点
			if(vm.codeTime>0) {
				return;
			}
			
			var rules = [{
				judge : tool.judge("phone",vm.param.phoneNumber),
				focus : $(".phoneNumber"),
				tips : "请输入正确的手机号码"
			}];
			if(!tool.validate(rules)) {
				return;
			}
			
			api.userCheck({phone : vm.param.phoneNumber}).then(function(data) {
				if(data.resultCode == 4028) {
					tool.message({type:"warning",message:"您已经注册过本网站，请使用您“报名的手机号+短信验证码登录”平台即可"});
					return Promise.reject();
				}
				if(data.resultCode == 2000) {
					//请求发送验证码接口
					return api.captcha({phoneNumber : vm.param.phoneNumber});
				}
			}).then(function(data){
				
				if(data.resultCode == 4025) {
					tool.message({type:"warning",message:"短信发送失败，请检查手机号码是否正确"});
				}
				if(data.resultCode == 4033) {
					tool.message({type:"warning",message:"获取验证码操作频繁，请稍候再试"});
				}
				if(data.resultCode == 2000) {
					tool.message({type:"success",message:"已发送验证码"});
					//重设等待时间,执行等待循环
					vm.codeTime = 61;
					vm.waitCode();
				}
			}).catch(function(){
			});
			
		},
		waitCode : function() {
			vm.codeTime--;
			
			//还未减到0,更新提示时间
			if(vm.codeTime>0) {
				vm.codeMsg = vm.codeTime+" s"
				setTimeout(vm.waitCode,1000);
				return;
			}
			//已减到0,复原状态
			vm.codeMsg = "获取验证码";
		},
		register : function() {
			if(!vm.remember) return;
			var rules = [{
				judge : tool.judge("phone",vm.param.phoneNumber),
				focus : $(".phoneNumber"),
				tips : tips.phone
			},{
				judge : vm.param.captcha,
				focus : $(".captcha"),
				tips : tips.captcha
			},{
				judge : tool.judge("password",vm.param.password),
				focus : $(".password"),
				tips : tips.password
			},{
				judge : vm.param.password == vm.param.confirmPassword,
				focus : $(".confirmPassword"),
				tips: "两次密码输入不一致"
			}];
			if(!tool.validate(rules)) {
				return;
			}
			
			api.register(vm.param).then(function(data) {
				if(data.resultCode == 4028) {
					tool.message({type:"warning",message:"该账号已存在，请直接登录"});
				}
				if(data.resultCode == 4026) {
					tool.message({type:"warning",message:"验证码错误"});
				}
				if(data.resultCode == 2000) {
					tool.message({type:"success",message:"注册成功"});
					vm.openLogin();
				}
			})
		}
	},
	created : function() {
		vm = this;
	}
}
</script>

<style scoped src="../../style/account/login.css"></style>
<style scoped>
	.sure_btn {
		margin-top: 0.15rem;
	}
	.row_2,.row_3 {
		margin-top: 0.2rem;
	}
	.no_sure_btn{
		cursor:not-allowed;
		background-color: #E7EAED;
	}
	.no_sure_btn:hover {
	background-color: #E7EAED;
}
</style>